<template>
    <view class="content">
        <van-nav-bar title="服务详情" left-arrow @click-left="onClickLeft" id="navBarS"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="scroll_wrapper">
                <view class="moneyBg">
                    <view class="text">{{ navBarTitle }}</view>
                </view>
                <view class="orderList" @click="toOrderDetail(item, item.orderNum, item.orderStatus)">
                    <view class="goodsDetail">
                        <view class="wraper_left">
                            <view class="goodsPic">
                                <img class="img" :src="reservationInfo.image" mode="widthFix" />
                            </view>
                            <view class="goodsText">
                                <view class="goodsTop">
                                    <view class="goods_T">{{ reservationInfo.newName }}</view>
                                </view>
                                <view class="goodsMiddle"> 订单编号:<span>{{ reservationInfo.reservationId }} </span></view>
                                <view class="goodsBottom">有效期至: <span>{{ reservationInfo.endDate }}</span> </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 二维码 -->
                <view class="serviceCodeBox" v-if=" reservationInfo.serviceStatus =='ordered'">
                    <!-- <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/QRcode1227.png" alt="" > -->
                    <view class="qrcode-box">
                        <image :src="reservationInfo.reservationQrCode"></image>
                    </view>
                    <view class="serviceNum">预约码：{{reservationInfo.reservationCode}}</view>
                    <view class="codeTips">为保证您的权益，服务人员未到前请不要将预约码提供给服务人员</view>
                </view>
                <!-- 彩色的线 -->
                <view class="clearfix">
                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png"
                        alt="" style=" display:block; width: 100%; height:3px;" />
                </view>
                <!-- 服务状态 -->
                <pageSteps :activeIndex="activeIndex" :active="active" :serviceStatus="serviceStatus"
                    :reservationId="reservationId"></pageSteps>
                <!-- <view class="serviceStatus" v-if="!isCancel">
                    <view class="serviceStatusTop">
                        <view class="serviceStatusTitle">服务状态</view>
                        <view class="act_more" @click="toServiceStatus">
                            <span class=" act_t" style="display: inline-block;">查看更多</span><van-icon name="arrow" />
                        </view>
                    </view>
                    <view class="serviceStatusSteps">
                        <van-steps :steps="steps" :active="active" active-color="#FF6203" />

                        <view class="progress-container">
                            <view class="progressItem" v-for="(step, index) in steps" :key="index">
                                <view class="progress-step completed">
                                    <view class="step-icon"><img :src="index<=activeIndex ? activeIcon : inactiveIcon"
                                            alt=""></view>
                                    <view class="step-label">{{step.text}}</view>
                                </view>
                                <view class="progress-line-Item"
                                    style="height: 34rpx; line-height: 34rpx; display: flex; flex-direction: column; justify-content: center;"
                                    v-if="index<=(steps.length-2)">
                                    <view :class="['progress-line', index < activeIndex ? 'completed' : '']"></view>
                                </view>
                            </view>
                        </view>

                    </view>
                </view> -->
                <!-- 服务信息 -->
                <view class="serviceInfo">
                    <view class="serviceInfoTitle">预约详情</view>
                    <view class="serviceInfoContent">
                        <view class="serviceInfoLabel">服务编号： <span>{{reservationInfo.reservationId}}</span></view>
                        <view class="serviceInfoLabel">服务时间： <span>{{reservationInfo.reservationDate}}
                                {{reservationInfo.reservationStartTime}}<span style=""
                                    v-if="reservationInfo.reservationStartTime && reservationInfo.reservationEndTime">~</span>{{reservationInfo.reservationEndTime}}</span>
                        </view>
                        <view class="serviceInfoLabel">预约地址： <span>{{reservationInfo.houseNumber}}</span></view>
                        <view class="serviceInfoLabel">联系电话： <span>{{reservationInfo.contactPhone}}</span></view>
                    </view>
                </view>
                <!-- 服务人员 Service Staff-->
                <view class="serviceStaffInfo">
                    <view class="serviceStaffInfoTitle">服务人员</view>
                    <view class="serviceStaffInfoContent">
                        <view class="staffInfo_left">
                            <view class="serviceStaffImg"><img :src="serviceEmpInfo.avatarUrl" alt=""></view>
                            <view class="serviceStaffText">
                                <view class="staffName">{{serviceEmpInfo.name}} <span
                                        v-if="serviceEmpInfo.workYear && serviceEmpInfo.workYear>0">{{serviceEmpInfo.workYear}}年工作经验</span>
                                </view>
                                <view class="staffInfoLabel">
                                    <view class="labelItem" v-for="(item,index) in serviceEmpInfo.labels" :key="index"
                                        :class="index===0 ? 'labelItem' : (index===1 ? 'blueItem' : (index==2 ? 'greenItem':'') )">
                                        {{item.name}}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="serviceInfoTel" @tap="toContactStaff"> <van-icon name="phone" siza="22"
                                color="#FF6203" /> </view>
                    </view>
                </view>
                <view class="defaultDetailBox"
                    v-if="serviceStatus=='canceled' || reservationInfo.serviceStatus=='canceled'">
                    <view class="serviceInfoTitle">取消详情</view>
                    <view class="defaultAmount" v-if="defaultAmount && defaultAmount>0">
                        <view>违约金额</view>
                        <view>￥{{defaultAmount}}</view>
                    </view>
                    <view class="defaultAmount" v-if="cancelReason">
                        <view>取消原因</view>
                        <view>{{cancelReason}}</view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="goodsAction nav_box" v-if="reservationInfo.serviceStatus !=='canceled'">
            <van-goods-action class="my-goods-action">
                <van-goods-action-icon icon="service-o" @click="onClickIcon" />
                <van-goods-action-button class="my-action-buttonL"
                    :color="reservationInfo.serviceStatus === 'serving' ? '#CCCCCC' : '#FF6203'" text="取消预约"
                    @click="oncCancelService" :disabled="reservationInfo.serviceStatus === 'serving'"
                    v-if="reservationInfo.serviceStatus =='ordered' || reservationInfo.serviceStatus == 'serving' || active===1" />
                <template v-else-if="reservationInfo.serviceStatus == 'completed'">
                    <van-goods-action-button class="my-action-buttonL" color="#FF6203" text="去评价" @click="toSendJudge" v-if="!replyId" />
                    <van-goods-action-button class="my-action-buttonL" color="#FF6203" text="查看评价" @click="checkJudge" v-if="replyId" />
                </template>

            </van-goods-action>
        </view>
        <van-toast id="van-toast" />
        <judgeServicePopup :show="show" @closePopup="closePopup"></judgeServicePopup>
        <cancelBooked :show="showCancel" @closeCancelPopup="closeCancelPopup"></cancelBooked>
    </view>
</template>

<script>
import judgeServicePopup from '@/mycomponents/myService/judgeServicePopup.vue';
import cancelBooked from '@/mycomponents/myService/cancelBooked.vue';
import pageSteps from '@/mycomponents/pageSteps.vue';
import {reservationInfoApi} from '@/api/service'
export default {
    components: {
        judgeServicePopup,
        cancelBooked,
        pageSteps
    },
    data() {
        return {
            navBarTitle: '',
            scrolling:false,
            show:false,  //预约详情弹窗
            showCancel:false,
            isCancel:false,
            refundMoney:'52',
            date:'2024-10-12 18:20',
            refundAmount:'52',
            refundScore:'4540', //退回积分
            refundCoupon:1,//退回优惠券数量
            refundReason:'其他',
            applyDate:'apply', //申请时间
            refundCode:'3466777777888',
            reservationInfo: {
                orderNum:'343434343313131',
                orderStatus:'待收货',
                goodsId:11,
                imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
                title:'黄芪杞姜枣糕红枣',
                price:'96',
                num:'1',
                jifen:190,
                money:'156',
                specs:'口味一：五斤装',
                logistics:'',
                serviceStatus:'wait_order',
            },
            active:0,
            activeIndex:0,
            steps: [
                {
                    text: '已预约',
                    // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                },
                {
                    text: '待服务',
                    // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                },
                {
                    text: '服务中',
                    // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                },
                {
                    text: '已完成',
                    // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
                    activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
                }
            ],
            serviceEmpInfo: {
                avatarUrl: "https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/operation-platform/45c284f4-6a31-4a98-a2a5-d0db58dd8ee8.jpg",
                contactPhone: "18059099219",
                labels:['金牌保姆','会开车','育儿经验'],
                name: "张三",
                sex: "male",
                workStart: "2020-01-16",
                workYear: 5,
            }, //服务人员信息
            
            params:undefined, //接受从路由传过来的参数
            activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',  
            inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png', 
            serviceNum:'0132443',
            defaultAmount:25, //违约金额
            cancelReason:'', //违约原因
            source:'',
            serviceStatus:'',
            reservationId:'',
            replyId:undefined,
        }
    },
    onLoad(data) {
        if(data && data.params){
            this.params=JSON.parse(decodeURIComponent(data.params))
            console.log(this.params,'params')
            // this.serviceStatus = this.params.serviceStatus || ''
            this.active=Number(this.params.actStatus) || 0
            this.reservationId = this.params.reservationId
            console.log(this.serviceStatus,this.params)
            // this.getNavBarTitle(this.params.serviceStatus)
            // if(this.params.actStatus===0){
            //     this.navBarTitle='已预约'
            //     if(this.params.clickType==='button'){
            //         this.showCancel=true
            //     }
            //     this.steps= [
            //         {
            //             text: '已预约',
            //             // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //             activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //         },
            //         {
            //             text: '待服务',
            //             // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //             activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //         },
            //         {
            //             text: '服务中',
            //             // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //             activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //         },
            //         {
            //             text: '已完成',
            //             // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //             activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //         }
            //     ]
            // }else if(this.params.actStatus===1) {  //已服务 待评价  
            //     this.navBarTitle='待服务'
            //     // this.steps= [
            //     //     {
            //     //         text: '已预约',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '待服务',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '服务中',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '已完成',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     }
            //     // ]
            // }else if(this.params.actStatus===2) {  //服务中 待评价  
            //     this.navBarTitle='服务中'
            //     // this.steps= [
            //     //     {
            //     //         text: '已预约',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '待服务',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '服务中',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '已完成',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     }
            //     // ]
            // }else if(this.params.actStatus===3){  //已完成 已评价
            //      this.navBarTitle='已评价'
            //      if(this.params.clickType==='button'){
            //         this.show=true
            //     }
            //     // this.steps= [
            //     //     {
            //     //         text: '已预约',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '待服务',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '服务中',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '已完成',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     }
            //     // ]
            // }else if(this.params.actStatus===4){ //取消
            //      this.navBarTitle='已取消'
            //      if(this.params.clickType==='button'){
            //         this.show=true
            //     }
            //     // this.steps= [
            //     //     {
            //     //         text: '已预约',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '待服务',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     {
            //     //         text: '已取消',
            //     //         // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //         activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     },
            //     //     // {
            //     //     //     text: '已完成',
            //     //     //     // inactiveIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/noCheck0113.png',
            //     //     //     activeIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png'
            //     //     // }
            //     // ]
            // }
            this.getReservationInfo()
            console.log(this.reservationInfo,'reservationInfo')
        }
    },
    onReady () {
        
    },
    onShow(){
        console.log(this.active,this.params,'000')
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            console.log(this.params.actStatus, 'actStatus')
            uni.reLaunch({
                url: '/pages/myService/myService?type=' +
                    encodeURIComponent(JSON.stringify(this.active))
            })
        },

        getNavBarTitle(serviceStatus) {
            // 修改后的导航标题判断逻辑
            if (serviceStatus === 'wait_order') {
                this.navBarTitle = '待使用'
                this.activeIndex = 0
            } else if (serviceStatus === 'ordered') {
                this.navBarTitle = '待服务'
                this.activeIndex = 1
            } else if (serviceStatus === 'serving') {
                this.navBarTitle = '服务中'
                this.activeIndex = 2
            }  else if (serviceStatus === 'wait_replay' ||serviceStatus === 'wait_evaluate') {
                this.navBarTitle = '待评价'
                this.activeIndex = 3
            } else if (serviceStatus === 'replay' || serviceStatus === 'completed') {
                this.navBarTitle = '已完成'
                this.activeIndex = 3
                if(this.params.clickType==='button'){
                    this.show=true
                }
            } else if (serviceStatus === 'canceled') {
                this.navBarTitle = '已取消'
                this.activeIndex=2
            }
        },

        // 查看评价
        checkJudge(){
            // this.show=true
            const params = {
                replyId:this.replyId,
            }
            uni.navigateTo({
                url:
                    '/pages/userJudges/serviceComment?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        // 关闭评价弹窗
        closePopup(){
            this.show=false
        },
        // 取消预约
        oncCancelService(){
            if(this.serviceStatus==='serving'){
                return
            }
            const params = {
                reservationId:this.reservationId,
                orderType:1,
            }
            uni.navigateTo({
                url:
                    '/pages/myService/cancelServiceReason?params=' +
                    encodeURIComponent(JSON.stringify(params))
            })
        },
        // 关闭
        closeCancelPopup(){
            this.showCancel=false
        },
        // 去评价
        toSendJudge(){
            const params ={
                productInfoList : this.reservationInfo,
                source:this.source,
                orderType:1, //1服务订单 0商品订单
                reservationId:this.reservationId,
                pageSymbol:'myService'
            }
          uni.navigateTo({
            url: '/pages/userJudges/oneJudge?params=' +
            encodeURIComponent(JSON.stringify(params))
          })
        },
        
        // 查看服务状态
        toServiceStatus(){
            uni.navigateTo({
                url:'/pages/myService/serviceProcess'
            })
        },
        // 联系服务人员
        toContactStaff(){
            uni.makePhoneCall({
                phoneNumber: this.serviceEmpInfo.contactPhone
            })
        },
        // 服务订单详情
        getReservationInfo(){
            reservationInfoApi({reservationId:this.reservationId}).then(res=>{
                if (res.code == 200) {
                    this.reservationInfo = res.data
                    this.serviceEmpInfo = res.data.serviceEmpInfo
                    this.serviceStatus = res.data.serviceStatus
                    if(res.data.serviceStatus =='canceled'){
                        this.isCancel=true
                        this.defaultAmount = res.data.money || 0
                        this.cancelReason = res.data.reasonData.desc || ''
                    }
                    this.replyId = res.data?.replayId || ''
                    this.getNavBarTitle(res.data.serviceStatus)
                    console.log(res.data,'res.data')
                }
            })
        }


    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.scroll_wrapper{
    padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
}
.moneyBg{
    margin-top: 17px;
    margin-left: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;
}
.text{
    font-size: 30px;
    text-align: center;
    color: #111111;
    line-height: 30px;
}
.money{
    font-size: 20px;
    color: #111111;
    text-align: center;
    line-height: 20px;
    margin-left:19px;
}

.date{
    margin-top: 36px;
    padding: 0px 24px;
}

.refundDetail{
    padding: 42px 24px 24px 24px ;
}
.box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111111;
    font-size: 14px;
    line-height: 14px;
}
.refundText{
    color: #111111;
    font-size: 14px;
    line-height: 14px;
}
.refundR{
    color: #888888;
}
/* dingdan编号 */
.refundCode{
    display: flex;
    align-items: center;
}
/* 复制两个字体 */
.copy {
    font-size: 12px;
    text-align: right;
    color: #111111;
    line-height: 12px;
  }
.orderList {
    padding: 40rpx 0px;
    margin: 0rpx 48rpx;
    background-color: #ffffff;
    width: calc(100% - 96rpx);
    // border-bottom: 1px solid #F0F0F0;

    // 待付款
    .orderTop {
        display: flex;
        align-items: center;
    }

    .orderTopRight {
        width: 100%;
    }

    .listTop {
        display: flex;
        align-items: center;

        .listTopLeft {
            width: 147rpx;

            img {
                width: 100%;
                height: auto;
            }
        }

        .listTopRight {
            color: #FF6203;
            text-align: right;
            line-height: 26rpx;
            font-size: 26rpx;
        }
    }

    .goodsDetail {
        margin-top: 20rpx;
        width: 100%;

        .wraper_left {
            display: flex;
            width: 100%;
            margin-bottom: 11px;
        }

        .wraper_left:last-child {
            margin-bottom: 0px;
        }

        // .wraper_right {
        //     float: right;
        // }

        .goodsPic {
            width: 25%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
                width: 100%;
                height: auto;
            }
        }

        .goods_tips {
            margin-top: 6px;
            font-size: 22rpx;
            text-align: left;
            color: #888888;
            line-height: 22rpx;
        }

        .goodsText {
            width: 67%;
            margin-left: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 12rpx;
            padding-bottom: 20rpx;
            text-align: left;

            .goodsTop {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .goods_T {
                    max-width: 80%;
                    font-size: 28rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 28rpx;
                    // margin-top: 9px;  //display：flex   中 元素居中
                    white-space: nowrap;
                    /* 防止文本换行 */
                    overflow: hidden;
                    /* 超出部分隐藏 */
                    text-overflow: ellipsis;
                    /* 显示省略号 */
                }

            }

            .goodsMiddle {
                margin-top: 26rpx;
                width: 100%;
                font-size: 22rpx;
                text-align: left;
                color: #666666;
                line-height: 22rpx;

                span {
                    margin-left: 20rpx;
                }
            }

            .goodsBottom {
                margin-top: 25rpx;
                display: flex;
                align-items: center;
                width: 100%;
                font-size: 22rpx;
                text-align: left;
                color: #666666;

                span {
                    margin-left: 20rpx;
                    font-size: 22rpx;
                    text-align: left;
                    color: #111111;
                    line-height: 22rpx;
                }
            }
        }
    }
}

// 服务信息预约码
.serviceCodeBox {
    padding: 24rpx 48rpx 48rpx 48rpx;
    text-align: center;

    img {
        width: 260rpx;
        height: 260rpx;
    }
    .qrcode-box {
        margin: 10rpx auto;
        text-align: center;
        height: 260rpx;
        width: 260rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
            width: 260rpx;
            height: 260rpx;
        }
    }
    .serviceNum{
        margin-top: 24rpx;
        font-size: 28rpx;
        color: #111111;
        line-height: 28rpx;
    }
    .codeTips{
        margin-top: 24rpx;
        color: #999999;
        font-size:24rpx;
        // line-height: 24rpx;
    }
}

//服务状态
// .serviceStatus {
//     padding-top: 55rpx;
//     margin: 0rpx 48rpx;
//     border-bottom: 1px solid #f0f0f0;

//     .serviceStatusTop {
//         display: flex;
//         justify-content: space-between;
//         align-items: center;

//         .serviceStatusTitle {
//             font-size: 36rpx;
//             line-height: 36rpx;
//             text-align: left;
//             color: #111111;
//         }

//         .act_more {
//             line-height: 24rpx;
//             vertical-align: middle;
//             height: 24rpx;
//             font-size: 24rpx;
//             text-align: right;
//             color: #666666;

//             .act_t {
//                 color: #888888;
//                 font-size: 24rpx;
//                 line-height: 24rpx;
//                 margin-right: 17rpx;
//             }

//             .act_Im {
//                 vertical-align: -2rpx;
//             }
//         }
//     }

//     .serviceStatusSteps {
//         padding-top: 60rpx;
//         padding-bottom: 77rpx;
//     }
// }
// 服务信息
.serviceInfo{
    margin-top: 55rpx;
    padding:0rpx 48rpx;
    .serviceInfoTitle{
        font-size: 38rpx;
        text-align: left;
        color: #111111;
        line-height: 38rpx;
    }
    .serviceInfoContent{
        margin-top: 52rpx;
        padding-bottom: 49rpx;
        .serviceInfoLabel{
            font-size: 28rpx;
            line-height: 28rpx;
            text-align: left;
            color: #888888;
            margin-bottom: 38rpx;

            span{
                font-size: 28rpx;
                text-align: left;
                color: #111111;
                line-height: 28rpx;
            }
        }
    }
}
// 服务人员
.serviceStaffInfo{
    padding:0rpx 48rpx;

    .serviceStaffInfoTitle{
        font-size: 36rpx;
        text-align: left;
        color: #333333;
        line-height: 36rpx;
    }
    .serviceStaffInfoContent{
        padding-top: 32rpx;
        padding-bottom: 62rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .staffInfo_left{
            display: flex;
            align-items: center;
        }
        .serviceStaffImg{
            // width: 15%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            img{
                // width: 100%;
                // height: auto;
                width: 114rpx;
                height: 114rpx;
                border-radius: 50%;
                margin-right: 24rpx;
            }
        }
        .serviceStaffText{
            // margin-left: 44rpx;
            .staffName{
                font-weight: bolder;
                font-size: 32rpx;
                text-align: left;
                color: #333333;
                line-height: 32rpx; 
                display: flex;
                align-items: center;

                span{
                    font-weight: normal;
                    font-size: 24rpx;
                    text-align: left;
                    color: #999999;
                    line-height: 24rpx;
                    padding-left:16rpx;
                }
            }
            .staffInfoLabel{
                display: flex;
                margin-top: 18rpx;

                .labelItem{
                    border: 1px solid #FF6203;
                    background-color: rgb(255, 98, 3, 0.06);
                    color: #FF6203;
                    font-size: 22rpx;
                    line-height: 22rpx;
                    text-align: center;
                    padding: 10rpx 22rpx;
                    border-radius: 25rpx;
                    margin-right: 16rpx;
                }
                .blueItem{
                    border: 1px solid #0094D9;
                    background-color: rgb(0, 148, 217, 0.06);
                    color: #0094D9;
                }
                .greenItem{
                    border: 1px solid #00CB00;
                    background-color: rgb(0, 203, 0, 0.06);
                    color: #00CB00;
                }
                .labelItem:last-child{
                    margin-right: 0rpx;
                }
            }
        }
        .serviceInfoTel{
            text-align: right;
            margin-left: 60rpx;
        }

    }
}
::v-deep .serviceInfoTel .van-icon{
    font-size: 40rpx!important;
}
// 违约详情
.defaultDetailBox{
    margin:0 48rpx;
    padding: 48rpx 0;
    border-top: 1px solid #f0f0f0;

    .defaultAmount{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        margin-top: 24rpx;
    }

}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep #navBarS .van-icon {
    color: #242629 !important;
}
::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
::v-deep  .van-goods-action, .van-goods-action--safe{
    border-top: 1px solid #f9f9f9 !important;
}

 .t16{
    margin-top: 16px;
 }


 .progress-container {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    justify-content: space-between;
}
.progressItem{
    // display: flex;
    position: relative;
}
.progress-step {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.step-icon {
    width: 34rpx;
    height: 34rpx;
    border-radius: 50%;
    // background-color: #D4D4D4;
    // color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-size: 12px;
    img{
        width: 34rpx;
        height: 34rpx;
    }
}

.completed.step-icon {
    background-color: #FF6203;
}

.step-label {
    margin-top: 34rpx;
    font-size: 28rpx !important;
    line-height: 28rpx;
    text-align: center;
    color: #111111;
}

.progress-line-Item{
    position: absolute;
    top: 0rpx;
    left: 56rpx;
}
.progress-line {
    height: 4rpx;
    width: 147rpx;
    background-color: #D4D4D4;
    margin: 0rpx 8rpx;
}

.completed.progress-line {
    background-color: #FF6203;
}

::v-deep .van-button--primary {
    background: #ff6203 !important;
    background-color: #ff6203 !important;
    color: #ffffff;
    border: none !important;
    font-size: 28rpx !important;
    border-radius: 50rpx;
    width: 100%;
}
</style>
